{% extends 'layout.html' %}
{% load static %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
              <div class="panel-heading">折线图</div>
              <div class="panel-body">
                  <div id="m1" style="width: 100%;height: 400px;"></div>>
              </div>
        </div>
        <div class="row">
            <div class="col-sm-7">
                <div class="panel panel-default">
                      <div class="panel-heading">柱状图</div>
                      <div class="panel-body">
                        <div id="m2" style="width: 100%;height: 400px;"></div>
                      </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="panel panel-default">
                      <div class="panel-heading">饼图</div>
                      <div class="panel-body">
                        <div id="m3" style="width: 100%;height: 400px;"></div>
                      </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.js' %}"></script>
    <script type="text/javascript">
      $(function (){
          initLine();

          initBar();

          initPie();
      })

      // 折线图
      function initLine(){
        var myChart = echarts.init(document.getElementById('m1'));

        var option =  {
          title: {
            text: '分公司业绩汇总',
            left: "center",
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [],
            bottom:0
          },

          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        };

        $.ajax({
            url: '/chart/line/',
            type: "get",
            dataType: "JSON",
            success:function (res){
                if (res.status){
                    option.legend.data = res.data.legend;
                    option.xAxis.data = res.data.x_axis;
                    option.series = res.data.series_list;

                    myChart.setOption(option);
                }
            }
        })
      }



      // 初始化柱状图
      function initBar(){

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('m2'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '员工业绩汇总信息',
          textAlign: "auto",
          left: "center",
          subtext: "湖南分公司",

        },
        tooltip: {},
        legend: {
          data: [],
          bottom: 0
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: []
      };
      // 后台获取数据
      $.ajax({
          url: "/chart/bar/",
          type: "get",
          dataType: "JSON",
          success: function (res){
              // 将获取到的数据。更新到(option)中
              if (res.status){
                  option.legend.data = res.data.legend;
                  option.xAxis.data = res.data.x_axis;
                  option.series = res.data.series_list;


                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
              }
          }
      })
      }


      // 初始化饼状图
      function initPie(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('m3'));

      var option = {
              title: {
                text: '部门预算占比',
                subtext: '湖南分公司',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                bottom: 0
              },
              series: [
                {
                  name: '预算',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 1048, name: 'IT部' },
                    { value: 735, name: '新媒体' },
                    { value: 580, name: '运营' },
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

      $.ajax({
          url: "/chart/pie/",
          type: "get",
          dataType: "JSON",
          success: function (res){
              if (res.status){
                  option.series[0].data = res.data;
                  myChart.setOption(option);
              }
          }
      })

      }

    </script>
{% endblock %}